<template>
  <div>
    <!--顶部面包屑标识与导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>进货管理</el-breadcrumb-item>
      <el-breadcrumb-item>进货数据列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <div>
      <el-button type="primary" round @click="dialogFormVisible=true">
        添加进货
      </el-button>

      <el-dialog title="新增进货菜单" :visible.sync="dialogFormVisible">
        <!--新增进货表单-->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="支付类型" prop="payType">
            <el-radio-group v-model="ruleForm.payType">
              <el-radio label="支付宝"></el-radio>
              <el-radio label="微信"></el-radio>
              <el-radio label="银联"></el-radio>
            </el-radio-group>
          </el-form-item>

          <!--      被封印的进货时间-->
          <!--      <el-form-item label="进货时间" required>
                  <el-col :span="11">
                    <el-form-item prop="date1">
                      <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                      style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-form-item prop="date2">
                      <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>-->

          <!--被封印的操作员-->
          <!--<el-form-item label="操作员" prop="operatePerson">
                  <el-select v-model="ruleForm.operatePerson" placeholder="请选择操作员">
                    <el-option label="阿航" value="aaa"></el-option>
                    <el-option label="阿欣" value="ddd"></el-option>
                  </el-select>
                </el-form-item>-->

          <el-form-item label="进货数量" prop="number">
            <el-input-number v-model="ruleForm.number" @change="handleChange" :min="1" label="描述文字"></el-input-number>
          </el-form-item>

          <el-form-item label="进货价格" prop="inportPrice">
            <el-input-number v-model="ruleForm.inportPrice" :precision="2" min="0" :step="0.01"></el-input-number>
          </el-form-item>

          <el-form-item label="备注" prop="description">
            <el-input type="textarea" v-model="ruleForm.description"></el-input>
          </el-form-item>

          <el-form-item label="供应商名称" prop="providerId">
            <el-select v-model="ruleForm.providerId" clearable placeholder="请选择">
              <el-option
                  v-for="item in providerOptions"
                  :key="item.id"
                  :label="item.id+'.'+item.providerName"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="商品名称" prop="goodsId">
            <el-select v-model="ruleForm.goodsId" clearable placeholder="请选择">
              <el-option
                  v-for="item in goodsOptions"
                  :key="item.id"
                  :label="item.id+'.'+item.goodsName"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>
    </div>

    <!--表格-->
    <el-table
        :data="inportDataFrom"
        style="width: 100%">

      <el-table-column
          label="ID"
          prop="id">
      </el-table-column>
      <el-table-column
          label="支付类型"
          prop="payType">
      </el-table-column>
      <el-table-column
          label="进货时间"
          prop="inportTime">
      </el-table-column>
      <el-table-column
          label="操作员"
          prop="operatePerson">
      </el-table-column>
      <el-table-column
          label="进货数量"
          prop="number">
      </el-table-column>
      <el-table-column
          label="备注"
          prop="description">
      </el-table-column>
      <el-table-column
          label="进货价格"
          prop="inportPrice">
      </el-table-column>
      <el-table-column
          label="供应商ID"
          prop="providerId">
      </el-table-column>
      <el-table-column
          label="商品ID"
          prop="goodsId">
      </el-table-column>
      <el-table-column
          align="right">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button size="mini">
            <router-link to="/admin/inport/update">编辑</router-link>
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="deleteData(scope.row.id)"> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <div style="margin: 10px 0; text-align: right;">
      <el-pagination
          @current-change="changePage"
          layout="total, prev, pager, next"
          :hide-on-single-page="true"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {Message} from "element-ui";

export default {
  data() {
    return {
      //搜索框初始数据
      search: '',
      //新增进货的表单的显示状态
      dialogFormVisible: false,

      //进货列表
      inportDataFrom: [],

      /*以下是新增进货相关变量*/
      //供应商选项框
      providerOptions: [],
      //商品选项框
      goodsOptions: [],


      //表单数据
      ruleForm: {
        //进货类型
        payType: '',

        //进货数量
        number: '0',

        //备注
        description: '',

        //进货价格
        inportPrice: '1',

        //供应商id
        providerId: '',

        //商品id
        goodsId: '',


        // 分页相关数据
        currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
        pageSize: 20,
        total: 0,


      }
    };
  },


  methods: {
    //根据id删除数据
    deleteData(id) {
      let url = 'http://localhost:9090/inport/delete';
      console.log('url' + url);
      this.axios
          .create({
            'headers': {
              'Authorization': localStorage.getItem('localJwt'),
              'Content-Type': 'application/json'
            }
          })
          .post(url, id).then(
          (response) => {
            let jsonResult = response.data;
            console.log(response.data)
            if (jsonResult.state == 20000) {
              this.$alert(jsonResult.message, '操作成功', {
                confirmButtonText: '确定',
                callback: action => {
                  this.loadInportList();
                }
              })

            } else {
              this.$alert(jsonResult.message, '操作失败', {
                confirmButtonText: '确定',
                callback: action => {

                }
              })
            }

          }
      );
    },

    // 切换分页
    changePage(page) {
      this.$router.replace('?page=' + page);
      this.loadInportList();
    },

    //加载进货列表
    loadInportList() {
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }

      let url = 'http://localhost:9090/inport/select?page=' + page;
      console.log('url=' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get(url).then((response) => {
            let jsonResult = response.data;
            if (jsonResult.state == 20000) {
              this.inportDataFrom = jsonResult.data.list;
              this.currentPage = jsonResult.data.currentPage;
              this.pageSize = jsonResult.data.pageSize;
              this.total = jsonResult.data.total;
            } else {
              let title = '操作失败';
              this.$alert(jsonResult.message, title, {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                  }
              );
            }
          }
      );
    },

    //加载供应商列表
    loadProviderList() {

      let url = 'http://localhost:9090/busProvider/get-idAsc';
      console.log('url=' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get(url).then((response) => {
            let jsonResult = response.data;
            if (jsonResult.state == 20000) {
              this.providerOptions = jsonResult.data.list;
            } else {
              let title = '操作失败';
              this.$alert(jsonResult.message, title, {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                  }
              );
            }
          }
      );
    },

    //加载商品列表
    loadGoodsList() {
      let url = 'http://localhost:9090/busSales/selectGN';
      console.log('url=' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post(url).then((response) => {
            let jsonResult = response.data;
            if (jsonResult.state == 20000) {
              this.goodsOptions = jsonResult.data;
            } else {
              let title = '操作失败';
              this.$alert(jsonResult.message.title, {
                confirmButtonText: '确定',
                callback: action => {
                }
              })
            }
          }
      )

    },

    //提交表单
    submitForm(formName) {

      if (!this.ruleForm.payType) {
        this.$message.warning('请选择支付类型')
        return;
      }
      if (!this.ruleForm.number) {
        this.$message.warning('请选择进货数量')
        return;
      }
      if (!this.ruleForm.inportPrice) {
        this.$message.warning('请选择进货价格')
        return;
      }
      if (!this.ruleForm.description) {
        this.$message.warning('请输入备注')
        return;
      }
      if (!this.ruleForm.providerId) {
        this.$message.warning('请选择供应商名称')
        return;
      }
      if (!this.ruleForm.goodsId) {
        this.$message.warning('请选择商品名称')
        return;
      }


      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
              .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
              .post('http://localhost:9090/inport/insert', this.ruleForm)
              .then(response => {
                console.log(response);

                if (response.status === 200) {
                  Message({
                    message: '提交成功',
                    type: 'success'
                  });
                } else {
                  Message({
                    message: '提交失败',
                    type: 'success'
                  });
                }
                this.resetForm(this.ruleForm);


              })
              .catch(error => {
                console.error(error);
                // 如果请求失败，你可以在这里处理错误，例如弹出一个通知窗告知用户提交失败

              });
        } else {
          console.log('error submit');
          return false;
        }
      });
    },

    // 清空表单上的数据
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

  }
  ,
  mounted() {
    this.loadInportList();
    this.loadProviderList();
    this.loadGoodsList()
  }
}
</script>
